<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:include="public/page_css::page_css ('菜单管理')"/>

<body style="background-color: #f2f2f2;">
<div class="layui-fluid larry-wrapper">
    <div class="layui-card">
        <div style="padding: 20px; background-color: #F2F2F2;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md5">
                    <div class="layui-card">
                        <div class="layui-card-header">卡片面板</div>
                        <div class="layui-card-body">
                            <!--                            <div id="menu_tree"/>-->
                            <ul id="menuTree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md7">
                    <div class="layui-card">
                        <div class="layui-card-header">菜单详细</div>
                        <div class="layui-card-body">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单名称</label>
                                        <div class="layui-input-inline">
                                            <span name="mc"></span>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单图标</label>
                                        <div class="layui-input-inline">
                                            <span name="tb"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单路径</label>
                                        <div class="layui-input-inline">
                                            <span name="lj"></span>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单编码</label>
                                        <div class="layui-input-inline">
                                            <span name="code"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单位置</label>
                                        <div class="layui-input-inline">
                                            <span name="wz"></span>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">菜单描述</label>
                                        <div class="layui-input-inline">
                                            <span name="ms"></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button type="button" id="updateMenu" class="layui-btn"
                                                style="right: 10px;position: absolute;">
                                            修改
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--        <div class="layui-row layui-col-space30">
                    <div class="layui-col-xs24">
                    </div>
                </div>-->
    </div>
</div>

<div id="addMenu" style="display: none">
    <div class="layui-tab" lay-filter="menuTab">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="menu">新增菜单</li>
            <li lay-id="function">新增功能</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" action="" id="menuForm" lay-filter="addMenu" style="padding: 10px;">
                    <input name="id" value="" hidden="hidden"/>
                    <input name="type" value="0" hidden="hidden"/>
                    <input name="fjd" value="0" hidden="hidden"/>
                    <input name="wz" value="" hidden="hidden"/>
                    <input name="sq" value="1" hidden="hidden"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单名称</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="mc" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单路径</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="lj" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">菜单图标</label>
                            <div class="layui-input-inline">
                                <input type="text" name="tb" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" action="" id="functionForm" lay-filter="addFunction" style="padding: 10px;">
                    <input name="id" value="" hidden="hidden"/>
                    <input name="type" value="1" hidden="hidden"/>
                    <input name="sscdid" value="0" hidden="hidden"/>
                  <!-- <input name="px" value="0" hidden="hidden"/>-->
                    <input name="sq" value="1" hidden="hidden"/>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">功能名称</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="mc" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">功能编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="code" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">功能事件</label>
                            <div class="layui-input-inline">
                                <input type="text" name="event" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">功能类型</label>
                            <div class="layui-input-inline">
                                <select name="style" lay-verify="">
                                    <option value="0">全局按钮</option>
                                    <option value="1">头部按钮</option>
                                    <option value="2">表格行按钮</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">按钮顺序</label>
                        <div class="layui-input-inline">
                            <input type="text" name="px" lay-verify="required|number" autocomplete="off"
                                   class="layui-input">
                        </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<style type="text/css">
    .layui-form-label {
        float: left;
        display: block;
        padding: 9px 15px;
        width: 100px;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .disabled {
        pointer-events: none;
    }

    span {
        line-height: 36px;
        position: relative;
        font-size: 14px;
    }

    .layui-tab {
        margin: 10px 15px;
        text-align: left !important;
    }

    .layui-layer-page .layui-layer-content {
        position: relative;
        overflow: visible !important;
    }
</style>
<div th:include="public/public_js::public_js"></div>

<script>
    var ztree;
    var editMenuTreeNode;
    var type;
    layui.use(["layer", "jquery", "zzpUtils", "element", "form"], function () {
        var $ = layui.jquery,
            zzpUtils = layui.zzpUtils,
            element = layui.element,
            form = layui.form;
        //初始化ztree
        ztree = zzpUtils.ztree.init({
            url: layui.data('app').contextPath + "/sysMenu/getMenus",
            type: "post",
            elem: $("#menuTree"),
            setting: {
                callback: {
                    beforeExpand: window.zTreeBeforeExpand, // 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
                    onClick: window.zTreeOnClick
                },
                view: {
                    addDiyDom: window.addDiyDom
                }
            }
        });

        $(document).on('click', '#updateMenu', function () {
            if (editMenuTreeNode) {
                editMenu(editMenuTreeNode);
            } else {
                layer.msg('请选择要修改的信息');
            }
        });

        //监听tab切换事件   用于区分function menu
        element.on('tab(menuTab)', function (data) {
            type = data.index; //得到当前Tab的所在下标
        });

        //新增弹出框 及初始化设置
        window.addMenuDiag = function (treeNode) {
            console.log(treeNode);
            form.val("addMenu", {type:0, wz:0, sq:1});
            form.val("addFunction", {type:1, px:0, sq:1});
            var children = treeNode.children;
            if (children != undefined && children.length != 0) {
                if (children[0].type == 0) {
                    $("li[lay-id='function']").addClass("disabled");
                    element.tabChange("menuTab", "menu");
                    $("#menuForm [name='wz']").val(parseInt(children[children.length - 1].wz) + 1);
                } else {
                    $("li[lay-id='menu']").addClass("disabled");
                    $("li[lay-id='function']").removeClass("disabled");
                    element.tabChange("menuTab", "function");
                    $("#functionForm [name='px']").val(parseInt(children[children.length - 1].px) + 1);
                }
            } else {
                element.tabChange("menuTab", "menu");
                element.tabChange("menuTab", "function");
                $("#menuForm [name='wz']").val("0");
                $("#functionForm [name='px']").val("0");
            }
            $("#menuForm [name='fjd']").val(treeNode.id);
            $("#functionForm [name='sscdid']").val(treeNode.id);
            //调用后台方法
            menuFunction("add", treeNode);
        }

        //修改弹出框 及初始化设置
        window.editMenuDiag = function (treeNode) {
            console.log(treeNode);
            if (treeNode.type == 0) {
                form.val("addMenu", treeNode);
                $("li[lay-id='function']").addClass("disabled");
                element.tabChange("menuTab", "menu");
            } else {
                form.val("addFunction", treeNode);
                $("li[lay-id='menu']").addClass("disabled");
                element.tabChange("menuTab", "function");
            }
            //调用后台方法
            menuFunction("edit", treeNode);
        }

        /**
         * 调用后台添加方法
         *  menuType : add/edit
         **/
        function menuFunction(menuType, treeNode) {
            var url, dialog = zzpUtils.dialogBtn;
            dialog.init({
                title: "",
                area: ['auto', 'auto'],
                content: $("#addMenu"),
                isForm: true,
                //提交按钮前置方法
                beforSubmit: function () {
                    //type 0.是菜单  1.是功能按钮
                    var formObject = null;
                    if (type == 0) {
                        formObject = $("#menuForm");
                        url = "/sysMenu/" + menuType;
                    } else {
                        url = "/sysFunction/" + menuType;
                        formObject = $("#functionForm");
                    }
                    dialog.form = formObject;
                },
                submit: function (index, msgindex, layero, data) {
                    //添加方法
                    console.log(JSON.stringify(data.field));
                    zzpUtils.action({
                        url: url,
                        data: JSON.stringify(data.field),
                        success: function (msg) {
                            var res = zzpUtils.successMsg(msg);
                            if (res != false) {
                                layer.close(msgindex);
                                layer.close(index);
                                if (menuType == 'add') {
                                    ztree.addNodes(treeNode, res);
                                } else {
                                    var treeinfo = $.extend(true, treeNode, res);
                                    ztree.updateNode(treeinfo);
                                    window.zTreeOnClick(treeinfo.event, treeinfo.id, treeinfo);
                                }
                            }
                        }
                    });
                },
                clear: function () {
                    $("li").removeClass("disabled");
                    $("form input").val("");
                }
            });
            element.init();
        }
    });

    //为上面的控件添加事件方法

    function zTreeBeforeExpand() {
//        console.log(this);
    }
    //添加按钮
    function addDiyDom(treeId, treeNode) {
        if (treeNode.parentNode && treeNode.parentNode.id != 2) return;
        //当前节点
        var aObj = $("#" + treeNode.tId + "_a");
        //添加按钮
        var addStr = "<span class='demoIcon' id='addBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus='this.blur();'><i class='layui-icon layui-icon-add-1'/></span>";
        var editStr = "<span class='demoIcon' id='editBtn_" + treeNode.id + "' title='" + treeNode.name + "' onfocus= this.blur();'><i class='layui-icon layui-icon-edit'/><span/>";
        //菜单添加添加按钮
        if (treeNode.type == 0) {
            aObj.append(addStr);
            var addBtn = $("#addBtn_" + treeNode.id);
            if (addBtn) addBtn.bind("click", function () {
                addMenu(treeNode);
            });
            //权限按钮 修改按钮
        } else if (treeNode.type == 1) {
            aObj.append(editStr);
            var editBtn = $("#editBtn_" + treeNode.id);
            if (editBtn) editBtn.bind("click", function () {
                editMenu(treeNode);
            });
        }
    }
    /**
     * 修改事件
     * @param treeNode
     */
    function editMenu(treeNode) {
        editMenuDiag(treeNode);
    }
    /**
     * 添加事件
     * @param treeNode
     */
    function addMenu(treeNode) {
        addMenuDiag(treeNode);
    }

    //单击事件
    function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode.type == 0) {
            editMenuTreeNode = treeNode;
            $("span[name='mc']").html(treeNode.mc);
            $("span[name='tb']").html('<i class="layui-icon ' + treeNode.tb + '"/>  ' + treeNode.tb);
            $("span[name='lj']").html(treeNode.lj);
            $("span[name='code']").html(treeNode.code);
            $("span[name='wz']").html(treeNode.wz);
//            $("span[name='ms']").html(treeNode.ms);
        }
    }

</script>
